<template>
  <div>
    <div class="container">
      <div class="element">
        <div class="img_url">
          <img :src="url" alt="" width="100%" height="100%">
        </div>

      </div>
      <div class="target">
        <div class="img">
          <div class="img_url_1">
            <img :src="url" alt="" width="100%" height="100%">
          </div>
          <div class="name">{{ user }}</div>
        </div>
        <div class="li" @click="a(1)">
          <el-icon class="icon">
            <User />
          </el-icon>
          个人信息
        </div>
        <div class="li" @click="a(2)">
          <el-icon class="icon">
            <StarFilled />
          </el-icon>
          收藏
        </div>
        <div class="li" style="text-align: center" @click="ext">退出登录</div>
      </div>
    </div>
  </div>

</template>


<script setup lang="ts">

import { StarFilled, User } from '@element-plus/icons-vue'
import axios from 'axios'
import { ref } from 'vue'

const url = ref()

const user = ref()
axios.get('/api/user/getName', { headers: { Authorization: localStorage.getItem('token') } }).then(
  (res) => {
    url.value = res.data.img
    user.value = res.data.user
  }
)

function a(n: number) {
  window.open('/user/?nc=' + encodeURIComponent(n), '_blank')
}


// 退出登录
function ext() {
  localStorage.removeItem('token')
  location.reload()
  window.open('/login','_self')
}


</script>

<style scoped>
.name {
  padding-top: 15px;
  height: 30px;
  width: 80%;
  margin: 0 auto;
  text-align: center;
  cursor: default;
}

.icon {
  width: 30px;
}

.img {
  width: 100%;
  height: 145px;
}

.img_url {
  cursor: pointer;

  width: 100%;
  height: 100%;
  border-radius: 25px;
  overflow: hidden;
}

.img_url_1 {
  width: 42%;
  height: 65%;
  border-radius: 50px;
  margin: 10px auto 0;
  overflow: hidden;
}

.li {
  cursor: pointer;
  width: 100%;
  padding: 13px;
  border-top: 1px solid #686868;
}

.container {
  position: relative;
  width: 90px;
  height: 70px;

}

.element {
  width: 50px;
  height: 50px;
  border-radius: 25px;
  position: relative;
  top: 4px;
  left: 20px;
}

.target {
  border-radius: 12px;
  width: 250px;
  height: 320px;
  background-color: #333;
  color: #fff;
  padding: 10px;
  position: absolute;
  top: 8px;
  left: 75px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease-in-out;
}

.container:hover .target {
  opacity: 1;
  visibility: visible;
}

</style>